iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

React + D3 的正確姿勢系列 第 17

Day17-D3基本介紹(select、append、attr)

  • 分享至 

  • xImage
  •  

前言

從今天開始的文章就正式進入 D3 的圖表繪製設定了,光最基本的輸入輸出區域就花了不少篇幅說明 (其實是為了拖台錢讓鐵人賽更容易完賽XD) ,總之接下來的文章可能就會比前幾天的文章還困難一點,大家一起加油努力學起來吧!

svg

首先還是要介紹一下 svg , svg 是所有 D3 圖表中的基本,一開始我們必須要初始化一個 svg 的元素,這樣我們才能在 svg 內設定自己想要的圖表,簡單來說 svg 扮演的角色就是一個容器來讓我們裝入自己想產生的圖表,如果對於 svg 有任何不懂的歡迎先回去複習前幾天筆者寫過的文章,接下來所有的 API 都會跟 svg 的設定有關,所以 svg 的觀念真的要好好的記住XD

select

看到 select 應該就知道是負責選取什麼東西,沒錯 d3.select() 就是負責選取,那要選取什麼東西呢?其實 D3 可以選取的東西有兩種,一種是 selector 另一種是 node 非常的彈性,接下來就來說明一下兩者的寫法吧!

  • selector

    其實 selector 很簡單,就是利用 CSS selector 的方式來取得元素,所以寫法就跟以前在寫 jQuery 的時候很像,只是把 $ 改成 d3.select() 而已。

  • node

    node 就相對的複雜一點,因為要透過一些 DOM 的操作來取得 node ,像是 document.body 等等,這邊有個重要觀念是假如要利用 node 當作 d3.select 的參數,必須要確保這個 node 具有唯一性,因為使用這個方法時 D3 並不會遍歷整個 DOM ,這邊讀者要特別留意一下。

    至於 DOM 操作的方法筆者推薦用 document.querySelector() 的方式來取得元素,由於 document.querySelector() 取得的會是一個 NodeListNodeList 能接受的東西會比用 document.getElementById() 取得的 HTMLCollection 來的多很多,為了確保之後的設定值都可以順利地寫入,所以筆者就推薦用 document.querySelector() 了。

接下來就用個簡單的範例碼來演繹一下 d3.select() 的運作吧!

const selectedNode = d3.select('body')

append

append 顧名思義就是添加的意思,在 d3.append() 中就是負責新增 Node 的 API ,這邊讀者要記住一點,一定要先選取過後才可以進行添加 Node 的動作,不然 D3 也不知道要把這個 Node 新增在哪邊對吧XD

d3.append() 相較 d3.select() 就單純很多了,只要考慮要添加什麼 Node 進去就好,寫法如下:

const selectedNode = d3.select('body')
const appendNode = selectedNode.append('svg')

attr

一開始看到 attr 可能還想不出來這是做什麼用的,其實 attr 就是 attribute 的縮寫啦!所以 d3.attr() 就是負責替這個 Node 添加 attribute 的 API , d3.attr() 一共會帶兩個參數,順序為: attributeName 以及 attributeValue

相信聰明的你一定也知道這個要擺在 d3.select() 之後了,至於需不需要擺在 d3.append() 之前就看各位要怎麼設定了,但通常都會擺在 d3.append() 之後,畢竟已經存在於 DOM 中的 Node 早就利用 CSS 進行樣式的修改了對吧XD

const selectedNode = d3.select('body')
const appendNode = selectedNode.append('svg')
const attrNode = appendNode.attr('width', 300)

綜合上述 API

其實 JS 有個功能,就是可以多個 API 進行串接,讓上一個 API 處理完的東西傳遞給下一個 API 用,之後再回傳最終結果,這邊用個例子來說明:

const newData = originData
  .map(data => data * 2)
  .filter(el => el < 10)

其實 D3 也是一樣,由於 D3 有非常多的 API ,如果不直接進行 API 的串接那肯定是要設定很多變數很浪費空間,所以之後筆者的範例碼都會把 API 串接起來,接下來就把上面所講的 API 進行串接來初始化一個 svg 元素吧!

const width = 300
const height = 300

const svg = d3
  .select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)

上面這段的意思就是我初始化一個叫 svg 的變數,這個變數的功能就是在 body 內新增一個 svg 的節點,這個 svg 的寬跟高為 300px ,之後就可以利用這個 svg 變數進行後續的圖表操作了。

總結

今天介紹了不少東西不曉得讀者會不會覺得太難吸收呢?其實寫 JS 久了相信大家都會覺得 D3 的 API 命名好像 jQuery,當初筆者就是用 jQuery 的方式來思考這些 API ,從這個角度下去學習之後就會發現其實 D3 也沒有想像中的那麼難了XD

如果對於文章有任何問題歡迎在下面留言給我,沒問題的話明天要來開始進行 svg 內圖表的操作了。


上一篇
Day16-D3基本介紹(number format)
下一篇
Day18-D3基本介紹(data)
系列文
React + D3 的正確姿勢30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言